<template>
  <ul>
    <li v-for="(item,index) in data">
      <p>
        <span class="emphasize">{{item.name}}</span>
        <span class="jump">{{item.mobile}}</span>
      </p>
      <p class="row2">
        <span class="label">发言{{item.count}}次</span>
        <span class="time">最后发言时间：<span class="emphasize">{{item.time}}</span></span>
      </p>
    </li>
    <li class="lookAll" @click.stop="loadAll">查看全部<i class="iconfont icon-dextrad"></i></li>
  </ul>
</template>

<script>
  export default {
    name: 'record-list',
    components: {},
    mixins: [],
    computed: {},
    props: {
      data: {
        type: Array,
        default() {
          return []
        }
      },
      loadAll: {
        type: Function,
        default() {
          return () => {
          }
        }
      }
    },
    data() {
      return {}
    },
    methods: {},
    watch: {},
    mounted() {
    },
    created() {
    }
  }
</script>


<style lang="scss" scoped>
  ul {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    li {
      margin: 0 .5rem .7rem 2.2rem;
      align-items: center;
      border-bottom: 1px solid #ddd;
      padding-bottom: .7rem;
      p {
        margin: 0 0 .6rem 0;
        line-height: 1.2;

        &.row2 {
          margin-bottom: 0;
          .label {
            font-size: .5rem;
            background: #ff6600;
            padding: .2rem .5rem;
            color: #fff;
            font-weight: normal;
            border-radius: .6rem;
            margin-right: .1rem;
            display: -webkit-inline-box;
          }
          .time {
            float: right;
          }
        }
      }
    }
    .lookAll {
      margin: 0;
      padding: 0;
      line-height: 1;
      text-align: center;
      font-size: 1rem;
      border: 0;
      justify-content: center;
    }
  }
</style>
